<template>
	<div class="loading-wrap">
		<div class="loading">
			<div class="loading-bg"><img src="./loading.png"></div>
		</div>
	</div>
</template>

<script>
export default {

  	name: 'index'

};
</script>

<style lang="scss" scoped>
.loading-wrap{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 998;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0);

	.loading{
		position: absolute;
		top: 50%;
		left: 50%;
		width: 120px;
		height: 120px;
		// text-align: center;
		background: rgba(0, 0, 0, 0.8);
		transform: translate(-50%, -50%);
		border-radius: 10px;
		box-sizing: border-box;

		.loading-bg{
			width: 50px;
			height: 50px;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -25px;
			margin-top: -25px;
			img{
				width: 100%;
				height: 100%;
				-webkit-animation: load 1.6s linear infinite;
				-moz-animation: load 1.6s linear infinite;
				-ms-animation: load 1.6s linear infinite;
				-o-animation: load 1.6s linear infinite;
				animation: load 1.6s linear infinite;
			}

		}
	}
}

@-webkit-keyframes load{
	0%{
		transform: rotate(0deg);
	}
	50%{
		transform: rotate(180deg);
	}
	100%{
		transform: rotate(360deg);
	}
}
@-moz-keyframes load{
	0%{
		-moz-transform: rotate(0deg);
	}
	50%{
		-moz-transform: rotate(180deg);
	}
	100%{
		-moz-transform: rotate(360deg);
	}
}
@-ms-keyframes load{
	0%{
		-ms-transform: rotate(0deg);
	}
	50%{
		-ms-transform: rotate(180deg);
	}
	100%{
		-ms-transform: rotate(360deg);
	}
}
@-o-keyframes load{
	0%{
		-o-transform: rotate(0deg);
	}
	50%{
		-o-transform: rotate(180deg);
	}
	100%{
		-o-transform: rotate(360deg);
	}
}
@keyframes load{
	0%{
		transform: rotate(0deg);
	}
	50%{
		transform: rotate(180deg);
	}
	100%{
		transform: rotate(360deg);
	}
}

</style>
